import React from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import {
    useThemeColors,
    Navigation,
    UI,
    Layout,
} from '@gaozh1024/rn-toolkit';
import { SCREEN_NAMES } from '../../config';

export default function HomeTabScreen() {
    const colors = useThemeColors();

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            backgroundColor: colors.background,
            paddingHorizontal: 15,
        },
        card: {
            marginTop: 20,
            width: '100%',
        },
        buttonContainer: {
            marginBottom: 20,
            width: '100%',
        },
    });

    return (
        <Layout.Page
            headerShown={false}
            scrollable={true}
            safeAreaEdges={['top']}
            style={styles.container}
        >
            <UI.Button
                title={'UI'}
                fullWidth
                mb={12}
                onPress={() => Navigation.navigate(SCREEN_NAMES.UI_SCREEN)}
            />
            <UI.Button
                title={'Layout'}
                fullWidth
                mb={12}
                onPress={() => Navigation.navigate(SCREEN_NAMES.LAYOUT_SCREEN)}
            />

            <UI.Button
                title={'Feedback'}
                fullWidth
                mb={12}
                onPress={() => Navigation.navigate(SCREEN_NAMES.FEEDBACK_SCREEN)}
            />

            <UI.Button
                title={'Utils'}
                fullWidth
                mb={12}
                onPress={() => Navigation.navigate(SCREEN_NAMES.UTILS_SCREEN)}
            />
        </Layout.Page >
    );
}
